<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/resource"/>
    <title>执行日志 - Big Whale</title>
    <link href="../libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
    <style type="text/css">
        .textarea {
            width: 380px;
            /*初始化高度*/
            min-height: 150px;
            /*设置最大高度*/
            max-height: 500px;
            overflow: auto;
            background-color: #111;
        }
        .code {
            display: inline-block;
            width: 280px;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body ng-app="content-app" ng-controller="content-controller">
<div class="container-fluid animated fadeInDown">
    <div class="bw-nav">
        <div class="row">
            <ol class="breadcrumb">
                <li class="active">执行日志</li>
            </ol>
            <a class="bw-refresh" onclick="location.reload()" title="刷新">
                <i class="fa fa-refresh" style="font-size: 18px"></i>
            </a>
        </div>
    </div>
    <div class="bw-body">
        <div class="row">
            <div class="col-md-12 search-form">
                <form class="form-inline" ng-submit="options.mypage.toFirst()">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="代码" ng-model="options.query.content" ng-readonly="!!options.query.id">
                    </div>
                    <div class="form-group">
                        <label for="query_select_scheduleId">离线调度</label>
                        <select id="query_select_scheduleId" class="selectpicker show-tick" data-live-search="true" ng-model="options.query.scheduleId"
                                ng-options="item.id as item.name for item in scheduleList" ng-disabled="options.query.scheduleTopNodeId || options.query.scriptId_ || options.query.id">
                            <option value="">不限</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="query_select_scriptId">实时任务</label>
                        <select id="query_select_scriptId" class="selectpicker show-tick" data-live-search="true" ng-model="options.query.scriptId"
                                ng-options="item.id as item.name for item in streamList" ng-disabled="options.query.scheduleTopNodeId || options.query.scriptId_ || options.query.id">
                            <option value="">不限</option>
                        </select>
                    </div>
                    <mydaterange ng-start="options.query.start" ng-end="options.query.end" ng-show="!options.query.scheduleTopNodeId && !options.query.id"></mydaterange>
                    <div class="form-group" th:if="${session.user.root}" ng-show="!options.query.scheduleTopNodeId && !options.query.scriptId_ && !options.query.id">
                        <label for="query_select_createBy">用户</label>
                        <select id="query_select_createBy" class="selectpicker show-tick" data-live-search="true" ng-model="options.query.createBy"
                                ng-options="item.id as item.username for item in userList">
                            <option value="">不限</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success">搜索</button>
                    </div>
                </form>
            </div>
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th th:if="${session.user.root}">
                                用户
                            </th>
                            <th>
                                任务ID
                            </th>
                            <th>
                                任务名
                            </th>
                            <th>
                                业务时间
                            </th>
                            <th>
                                启动时间
                            </th>
                            <th>
                                状态
                            </th>
                            <th>
                                代码
                            </th>
                            <th>
                                输出
                            </th>
                            <th>
                                Yarn详情
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in options.items">
                            <td th:if="${session.user.root}">
                                {{userMap[item.createBy].username}}
                            </td>
                            <td>
                                <span class="id">{{item.id}}</span>
                            </td>
                            <td style="min-width: 80px;">
                                <span class="name">{{item.displayName}}</span>
                            </td>
                            <td style="min-width: 80px;">
                                {{item.businessTime}}
                            </td>
                            <td style="min-width: 80px;">
                                {{item.startTime}}
                            </td>
                            <td>
                                <label class="label label-{{labelSuffix(item)}}">
                                    <img ng-if="item.running" src="/img/loading.gif" />
                                    {{item.state}}
                                </label>
                            </td>
                            <td>
                                <kbd class="code">{{item.content}}</kbd>
                            </td>
                            <td style="cursor: pointer; word-break: break-all">
                                <textarea class="textarea" style="color: limegreen;" readonly>{{item.outputs}}</textarea><br/>
                                <textarea class="textarea" style="color: red;" readonly>{{item.errors}}</textarea>
                            </td>
                            <td style="min-width: 80px;">
                                <a ng-if="item.jobUrl != null" href="{{item.jobUrl}}" target="_blank">Applicaion Url</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-12">
                <mypage ng-model="options"></mypage>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<script src="../libs/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../libs/bootstrap-select/i18n/defaults-zh_CN.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/angular.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/myangular.js" type="text/javascript"></script>
<script src="../js/common.js" type="text/javascript"></script>
<script src="../libs/laydate/laydate.js" type="application/javascript"></script>
<script th:inline="javascript">
    var user = [[${session.user}]];
    var id = [[${id}]];
    var scheduleId = [[${scheduleId}]];
    var scheduleTopNodeId = [[${scheduleTopNodeId}]];
    var scheduleInstanceId = [[${scheduleInstanceId}]];
    var scriptId = [[${scriptId}]];
    var scriptId_ = [[${scriptId_}]];
    var app = angular.module('content-app', []);
    registerHttpInterceptor(app);
    registerPage(app);
    registerDateRangePicker(app);
    app.controller('content-controller', function ($scope, $http) {
        if (user.root) {
            getAuthUser($scope, $http);
        }
        getSchedule($scope, $http);
        getStream($scope, $http);

        var t1 = null;
        // 获取数据列表
        $scope.options = {
            query: {
                id: id,
                scheduleId: scheduleId,
                scheduleTopNodeId: scheduleTopNodeId,
                scheduleInstanceId: scheduleInstanceId,
                scriptId: scriptId,
                scriptId_: scriptId_
            },
            listUrl: './page.api',
            reloadAfter : function(items) {
                if (id || scheduleTopNodeId || scriptId) {
                    var finished = $scope.isFinish(items);
                    if (!finished) {
                        if (t1) {
                            window.clearInterval(t1);
                        }
                        t1 = window.setInterval($scope.reloadData, 2000);
                    }
                }
            }
        };

        $scope.reloadData = function () {
            $http.post('./page.api', $scope.options.query)
                .success(function (data) {
                    var items = data.content;
                    var match = 0;
                    $scope.options.items.forEach(function (oldItem) {
                        items.forEach(function (newItem) {
                            if (oldItem['id'] === newItem['id']) {
                                match ++;
                                oldItem['outputs'] = newItem['outputs'];
                                oldItem['errors'] = newItem['errors'];
                                oldItem['startTime'] = newItem['startTime'];
                                oldItem['finishTime'] = newItem['finishTime'];
                                oldItem['state'] = newItem['state'];
                                oldItem['jobUrl'] = newItem['jobUrl'];
                                oldItem['running'] = newItem['running'];
                            }
                        });
                    });
                    if (match === $scope.options.items.length) {
                        var finished = $scope.isFinish(items);
                        if (finished) {
                            window.clearInterval(t1);
                        }
                    } else {
                        window.clearInterval(t1);
                        $scope.options.mypage.reload();
                    }
                });
        };

        $scope.isFinish = function (items) {
            var size = items.length;
            var finish = 0;
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (!item.running) {
                    finish += 1;
                }
            }
            return finish >= size;
        };

        $scope.labelSuffix = function (item) {
            if ('UN_CONFIRMED' === item.state) {
                return 'default'
            }
            if ('TIME_WAIT' === item.state) {
                return 'warning'
            }
            if (item.running) {
                return 'info'
            }
            if ('SUCCEEDED' === item.state) {
                return 'success'
            }
            return 'danger';
        };

    });

</script>
</body>
</html>